<template>
  <div class="by-box">
    <el-row>
      <el-col :span="12">
        <el-button type="primary" size="small" :loading="deliveryFlag" @click="delivery">
          发运
        </el-button>
        <el-button type="primary" size="small" :loading="deleteFlag" @click="deleteDelivery">删除订单</el-button>
        <el-button type="primary" size="small" :loading="payOffFlag" @click="payOff">已付款</el-button>
        <router-link :to="{path: '/byTransport/transportBill',query:{orderId:currentOrderId}}">
          <el-badge :value="12" style="margin: 0 10px">
            <el-button type="primary" size="small" class="order-split-box">
              <svg-icon icon-class="waybill"></svg-icon>
              发运单管理
            </el-button>
          </el-badge>
        </router-link>
      </el-col>
      <el-col :span="4">
        <span class="by-null">'</span>
      </el-col>
      <el-col :span="8" class="by-right">
        <el-autocomplete
          class="inline-input"
          v-model="state1"
          size="small"
          :fetch-suggestions="querySearch"
          placeholder="请输入客户名称"
          @select="handleSelect"
          style="position: relative;right: 4px;top:2px"
        ></el-autocomplete>
        <el-button type="primary" size="small" icon="el-icon-search" @click="toggleSearch">更多</el-button>
        <el-button type="primary" size="small" :loading="refreshFlag" @click="refreshList">刷新</el-button>
      </el-col>
    </el-row>
    <el-row>
      <div class="by-search-box" :class="{'height200':searchFlag}">
        <el-form :inline="true" label-width="100px" style="margin: 4px 0 0 0">
          <el-form-item label="客户名称">
            <el-autocomplete
              class="inline-input"
              v-model="state1"
              size="small"
              :fetch-suggestions="querySearch"
              placeholder="客户名称"
              @select="handleSelect"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="货运部名称">
            <el-autocomplete
              class="inline-input"
              v-model="state1"
              size="small"
              :fetch-suggestions="querySearch"
              placeholder="货运部名称"
              @select="handleSelect"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="订单类型">
            <el-select v-model="searchObj.orderType" placeholder="订单类型" size="small">
              <el-option v-for ='(item,index) in Lists.orderType' :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="searchObj.orderStatus" placeholder="订单状态" size="small">
              <el-option v-for ='(item,index) in Lists.orderStatus' :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支付状态">
            <el-select v-model="searchObj.payStatus" placeholder="支付情况" size="small">
              <el-option v-for ='(item,index) in Lists.payStatus' :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间" style="width: 584px">
            <el-col :span="10">
              <el-date-picker type="date" placeholder="起始日期"  style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="4" style="text-align: center">---</el-col>
            <el-col :span="10">
              <el-time-picker type="date" placeholder="结尾日期" style="width: 100%;"></el-time-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="收获地址">
            <el-cascader
              :options="Area"
              change-on-select
              placeholder="目的地"
              style="width:300px"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="街道(具体)">
            <el-input  style="width: 370px!important;"></el-input>
          </el-form-item>
        </el-form>
        <el-row style="margin:0 0 4px 0">
          <el-col :span="20"><span class="by-null">"</span></el-col>
          <el-col :span="4" class="by-right">
            <el-button type="primary" size="small">查询</el-button>
            <el-button type="primary" size="small">重置</el-button>
          </el-col>
        </el-row>
      </div>
    </el-row>
    <div>
      <el-table
        id="by-order-table"
        border
        resizable
        ref="multipleTable"
        :data="tableList"
        tooltip-effect="dark"
        style="width: 100%;display: block"
        :highlight-current-row="true"
        @row-click= 'rowClick'
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" @selectClick.stop="byNull" width="34"></el-table-column>
        <el-table-column prop="customerName" label="客户姓名" width="80"></el-table-column>
        <el-table-column prop="customerPhone" label="客户电话" width="108"></el-table-column>
        <el-table-column label="订单类型" width="80">
          <template slot-scope="scope">
            {{scope.row.orderType | getOrderType }}
          </template>
        </el-table-column>
        <el-table-column prop="freight" label="货运部" width="120"></el-table-column>
        <el-table-column prop="freightPhone" label="货运部电话" width="120"></el-table-column>
        <el-table-column label="支付状态" width="80">
          <template slot-scope="scope">
            <i class="el-icon-success" style="color: #67C23A" v-if="parseInt(scope.row.isPay) === 1"></i>
            <i class="el-icon-warning" style="color: #E6A23C" v-else></i>
            {{scope.row.isPay | isPay }}
          </template>
        </el-table-column>
        <el-table-column prop="deliverGoodsTime" label="要求发运时间" width="160">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span>{{ scope.row.deliverGoodsTime| parseTimeImp }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column prop="orderStatus" :formatter="getOrderStatus" label="订单状态"  width="80"></el-table-column>-->
        <!--<el-table-column label="订单状态" width="80">-->
          <!--<template slot-scope="scope">-->
            <!--<i class="el-icon-error" style="color: #F56C6C" v-if="scope.row.orderStatus === 'CANCEL'"></i>-->
            <!--{{scope.row.orderStatus | getOrderStatus }}-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column label="实际支付(元)" width="100">
          <!-- byCurrency -->
          <template slot-scope="scope">
            {{scope.row.actualMoney | byCurrency }}
          </template>
        </el-table-column>
        <!--<el-table-column prop="orderType|getOrderStatus" label="订单类型"  width="80"></el-table-column>-->
        <el-table-column label="押金(元)" width="80">
          <!-- byCurrency -->
          <template slot-scope="scope">
            {{scope.row.deposit | byCurrency }}
          </template>
        </el-table-column>
        <el-table-column label="订单总额(元)" width="100">
          <!-- byCurrency -->
          <template slot-scope="scope">
            {{scope.row.totalMoney | byCurrency }}
          </template>
        </el-table-column>
        <el-table-column label="支付平台" width="100">
          <!-- byCurrency -->
          <template slot-scope="scope">
            {{scope.row.payWay | getPayway }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span>{{ scope.row.createTime| parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收货地址" width="360" >
          <template slot-scope="scope">
            <span>{{scope.row.p_c_a + scope.row.street}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="货运部地址" width="360"></el-table-column>
        <el-table-column prop="orderId" label="系统订单号" width="220"></el-table-column>
        <el-table-column fixed="right" label="操作" width="170">
          <template slot-scope="scope">
            <el-button
              class="order-opt-button"
              size="mini"
              type="primary"
              @click="handleDetail(scope.$index, scope.row)">编辑</el-button>
            <el-button
              class="order-opt-button"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">发运</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="by-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageVo.pageNo"
        :page-sizes="[10, 20, 30]"
        :page-size="pageVo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageVo.total">
      </el-pagination>
    </div>
    <div class="by-order-card">
      <el-row class="by-flex">
        <el-col class="by-over-y" :span="16">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>订单详情</span>
              <!--<el-button style="float: right; padding: 3px 6px" type="primary" @click="addPreviewWayBill" :disabled="addPreviewWayBillFlag">发运预览 <i class="el-icon-d-arrow-right el-icon&#45;&#45;right"></i></el-button>-->
              <el-button id="by-order-break-btn" type="primary" @click="breakWayBill" :disabled="multipleSelection.length!==1">拆&nbsp;单</el-button>
            </div>
            <el-form :inline="true" label-width="100px" label-position="right" v-show="currentRowClickInfo" >
              <el-form-item label="客户名称">{{currentRowClickInfo.customerName}}</el-form-item>
              <el-form-item label="客户电话">{{currentRowClickInfo.customerPhone}}</el-form-item>
              <el-form-item label="发运时间">{{currentRowClickInfo.deliverGoodsTime|parseTimeImp}}</el-form-item>
              <div></div>
              <el-form-item label="货运部">{{currentRowClickInfo.freight}}</el-form-item>
              <el-form-item label="货运部电话">{{currentRowClickInfo.freightPhone}}</el-form-item>
              <el-form-item label="货运部地址">
                {{currentRowClickInfo.address}}
                <span class="freight-address-map" @click="openAMap">
                  <el-popover
                    placement="top-start"
                    popper-class="el-popover-order"
                    width="250"
                    trigger="hover">
                    <div>
                      <div style="margin:0 0 4px 4px;color:#666">查看 <b>货运部</b> 在高德地图上的位置</div>
                      <div :style="{width:'234px',height:'65px','margin-bottom':'10px',background: '#fff url('+gaode_map+') 0 0 repeat'}"></div>
                    </div>
                     <svg-icon slot="reference" icon-class="map"></svg-icon>
                  </el-popover>
                </span>
              </el-form-item>
            </el-form>
            <fieldset v-if="orderDetailInfo.chair.length !== 0">
              <legend>&nbsp;椅子信息&nbsp;</legend>
              <el-table
                :data="orderDetailInfo.chair"
                border
                style="width: 100%">
                <el-table-column label="#" type="index" width="30"></el-table-column>
                <el-table-column prop="type" label="型号" :width="nameWidth">
                  <template slot-scope="scope">
                    <span>{{scope.row.type}}</span>
                    (<span>{{scope.row.type|a}}</span>)
                  </template>
                </el-table-column>
                <el-table-column label="颜色" :width="colorWidth">
                  <template slot-scope="scope">
                    <span>{{scope.row.color|a}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="数量" :width="colorWidth">
                  <template slot-scope="scope">
                    <span>{{scope.row.number}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="单位">
                  <template slot-scope="scope">
                    <span>{{scope.row.unit|a}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="坐板">
                  <template slot-scope="scope">
                    <span>{{scope.row.board|a}}</span>
                  </template>
                </el-table-column>
              </el-table>
            </fieldset>
            <fieldset v-if="orderDetailInfo.table.length !== 0">
              <legend>&nbsp;餐桌信息&nbsp;</legend>
              <el-table
                :data="orderDetailInfo.table"
                border
                style="width: 100%">
                <el-table-column label="#" type="index" width="30"></el-table-column>
                <el-table-column label="型号" :width="nameWidth">
                  <template slot-scope="scope">
                    <span>{{scope.row.type}}</span>
                    (<span>{{scope.row.type|a}}</span>)
                  </template>
                </el-table-column>
                <el-table-column label="颜色" :width="colorWidth">
                  <template slot-scope="scope">
                    <span>{{scope.row.color|a}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="数量" width="50px">
                  <template slot-scope="scope">
                    <span>{{scope.row.number}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="桌架">
                  <template slot-scope="scope">
                    <span>{{'163'}}</span>
                    (<span>{{'直线条'}}</span>)
                  </template>
                </el-table-column>
                <el-table-column label="台面">
                  <template slot-scope="scope">
                    <span>{{scope.row.desktop}}</span>
                    (<span>{{scope.row.desktop|a}}</span>)
                  </template>
                </el-table-column>
                <el-table-column label="餐桌脚">
                  <template slot-scope="scope">
                    <span>{{scope.row.footer|a}}</span>
                    (<span>{{scope.row.footerMaterial|a}}</span>)
                  </template>
                </el-table-column>
              </el-table>

            </fieldset>
            <fieldset v-if="orderDetailInfo.tea.length !== 0">
              <legend>&nbsp;茶几&nbsp;</legend>
              <el-table
                :data="orderDetailInfo.tea"
                border
                style="width: 100%">
                <el-table-column label="#" type="index" width="30"></el-table-column>
                <el-table-column label="型号" :width="nameWidth">
                  <template slot-scope="scope">
                    <span>{{scope.row.type}}</span>
                    (<span>{{scope.row.type|a}}</span>)
                  </template>
                </el-table-column>
                <el-table-column label="颜色" :width="colorWidth">
                  <template slot-scope="scope">
                    <span>{{scope.row.color|a}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="数量" width="50px">
                  <template slot-scope="scope">
                    <span>{{scope.row.number}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="材质">
                  <template slot-scope="scope">
                    <span>{{'中纤板'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="台面">
                  <template slot-scope="scope">
                    <span>{{scope.row.desktop}}</span>
                    (<span>{{scope.row.desktop|a}}</span>)
                  </template>
                </el-table-column>
              </el-table>

            </fieldset>
            <fieldset v-if="orderDetailInfo.tv.length !== 0">
              <legend>&nbsp;电视柜&nbsp;</legend>
              <el-table
                :data="orderDetailInfo.tv"
                border
                style="width: 100%">
                <el-table-column label="#" type="index" width="30"></el-table-column>
                <el-table-column label="型号" :width="nameWidth">
                  <template slot-scope="scope">
                    <span>{{scope.row.type}}</span>
                    (<span>{{scope.row.type|a}}</span>)
                  </template>
                </el-table-column>
                <el-table-column label="颜色" :width="colorWidth">
                  <template slot-scope="scope">
                    <span>{{scope.row.color|a}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="数量" width="50px">
                  <template slot-scope="scope">
                    <span>{{scope.row.number}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="材质">
                  <template slot-scope="scope">
                    <span>{{'中纤板'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="台面">
                  <template slot-scope="scope">
                    <span>{{scope.row.desktop}}</span>
                    (<span>{{scope.row.desktop|a}}</span>)
                  </template>
                </el-table-column>
              </el-table>

            </fieldset>
            <fieldset v-if="orderDetailInfo.remark.length !== 0">
              <legend>&nbsp;备注信息&nbsp;</legend>
              <el-table
                :data="orderDetailInfo.remark"
                border
                style="width: 100%">
                <el-table-column label="#" type="index" width="30"></el-table-column>
                <el-table-column label="备注">
                  <template slot-scope="scope">
                    <span>{{scope.row.remark}}</span>
                  </template>
                </el-table-column>
              </el-table>
              <div  class="text item" v-for="(item, key) in orderDetailInfo.remark" v-show="false">
                <div>{{item.remark}}</div>
              </div>
            </fieldset>
          </el-card>
        </el-col>
        <el-col class="by-over-y" :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>库存查询</span>
              <el-button style="float: right; padding: 3px 6px" type="primary">留 白</el-button>
            </div>
            <el-row>
              <el-col class="order-wareHorse-search">
                <!-- multiple  为多个条件查询  貌似可以用于条件查询 -->
                 <i class="order-search el-input__icon el-icon-search"></i>
                <el-select class="order-wareHorse-select" v-model="value9" filterable remote reserve-keyword placeholder="请输入产品关键词"
                           :remote-method="remoteMethod"
                           :loading="loading" @change="productionSelect" icon="el-icon-search">
                  <!--<el-option v-for="(item,key) in options4" :key="key" :label="item.name" :value="item.type"></el-option>-->
                  <el-option
                    v-for="(item,key) in options4"
                    :key="key"
                    :label="item.type+'('+item.name+ ')'"
                    :value="item.type">
                    <span style="float: left">{{ item.type }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                  </el-option>
                </el-select>
                <hr>
                <el-table :data="searchProductionTable" style="width: 100%">
                  <el-table-column prop="type" label="型号"></el-table-column>
                  <el-table-column prop="name" label="名称"></el-table-column>
                  <el-table-column prop="color" label="颜色"></el-table-column>
                  <el-table-column prop="number" label="数量"></el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <el-dialog id="by-order-el-dialog" title="订单详情" :visible.sync="dialogFormVisible">
      <order-detail :layer_data ='layerData' :dialogFormVisible ='dialogFormVisible' :order_detail_info_clone="orderDetailInfoClone">

      </order-detail>
    </el-dialog>

    <el-dialog id="by-order-breakBill" title="拆分订单" :visible.sync="dialogBreakBill">
      <break-bill :dialogBreakBill="dialogBreakBill" :billInfo="multipleSelection[0]" :billDetailInfo="orderDetailInfo" @dialog_break_bill_flag="close_dialog_break_bill">

      </break-bill>
    </el-dialog>

    <el-dialog id="by-order-aMap" title="高德地图" width="900px" :visible.sync="dialogAMap">
        <a-map></a-map>
    </el-dialog>

  </div>
</template>

<script type="text/javascript">
  import gaode_map from '@/assets/image/gaode-map.png'
  import { orderDetail, breakBill, aMap } from './component'
  import Area from '~/data/area'
  import { getList, getGoodsInfo, searchProduction, getProductionDetail } from '@/api/order/index'
  import * as orderAPI from '@/api/order'
  export default {
    name: 'order',
    components: {
      orderDetail,
      breakBill,
      aMap
    },
    data() {
      return {
        deliveryFlag: false,
        deleteFlag: false,
        payOffFlag: false,
        refreshFlag: false,
        dialogAMap: false,
        gaode_map: gaode_map,
        nameWidth: '100',
        colorWidth: '60',
        options4: [],
        value9: [],
        list: [],
        searchObj: {
          orderType: '',
          orderStatus: '',
          payStatus: ''
        },
        pageVo: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        loading: false,
        multipleSelection: [],
        previewWayBillList: [],
        addPreviewWayBillFlag: true,
        order_break_bill_flag: false,
        createWayBillFlag: true,
        dialogBreakBill: false,
        currentRowClickInfo: '',
        currentOrderId: '',
        wayBillNumber: {
          chairNumber: 0,
          tableNumber: 0,
          teaTableNumber: 0,
          tvTableNumber: 0,
          desktopNumber: 0
        },
        searchProductionTable: [],
        states: ['Alabama', 'Alaska', 'Arizona',
          'Arkansas', 'California', 'Colorado',
          'Connecticut', 'Delaware', 'Florida',
          'Georgia', 'Hawaii', 'Idaho', 'Illinois',
          'Indiana', 'Iowa', 'Kansas', 'Kentucky',
          'Louisiana', 'Maine', 'Maryland',
          'Massachusetts', 'Michigan', 'Minnesota',
          'Mississippi', 'Missouri', 'Montana',
          'Nebraska', 'Nevada', 'New Hampshire',
          'New Jersey', 'New Mexico', 'New York',
          'North Carolina', 'North Dakota', 'Ohio',
          'Oklahoma', 'Oregon', 'Pennsylvania',
          'Rhode Island', 'South Carolina',
          'South Dakota', 'Tennessee', 'Texas',
          'Utah', 'Vermont', 'Virginia',
          'Washington', 'West Virginia', 'Wisconsin',
          'Wyoming'],
        data: '',
        layerData: '',
        dialogFormVisible: false,
        searchFlag: '',
        currentPage4: 1,
        restaurants: [],
        state1: '',
        tableList: [],
        orderDetailInfo: {
          chair: [], table: [], tea: [], tv: [], remark: []
        },
        orderDetailInfoClone: {},
        Area: Area
      }
    },
    methods: {
      // 获取运单列表
      getList() {
        const that = this
        getList({
          condition: that.searchObj,
          pageVo: that.pageVo
        }).then(res => {
          if (res.success) {
            this.refreshFlag = false
            that.tableList = res.data
            that.pageVo = res.pageVo
            // 初始化设置
            that.orderDetailInfo = {
              chair: [], table: [], tea: [], tv: [], remark: []
            }
          } else {
            that.$message.error('获取列表数据失败')
          }
        }
        )
      },
      // 刷新
      refreshList() {
        this.refreshFlag = true
        this.getList()
      },
      // 发运订单
      delivery() {
        const that = this
        const l = this.multipleSelection.length
        if (l === 0) {
          this.$message({
            type: 'info',
            message: '未选择订单'
          })
        } else {
          const arr = []
          const isPayArr = []
          for (let i = 0; i < l; i++) {
            arr.push(this.multipleSelection[i].orderId)
            isPayArr.push(parseInt(this.multipleSelection[i].isPay))
          }
          if (isPayArr.indexOf(0) === -1) {
            this.$confirm('有未付清订单, 是否继续发运?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // 进行确认操作
              this.deliveryFlag = true
              orderAPI.delivery({ orderId: arr }).then(res => {
                if (res.success) {
                  this.deliveryFlag = false
                  that.$notify({
                    title: '成功',
                    message: res.message,
                    type: 'success'
                  })
                  that.getList()
                }
              })
            }).catch(() => {
              // 取消
            })
          } else {
            this.deliveryFlag = true
            orderAPI.delivery({ orderId: arr }).then(res => {
              if (res.success) {
                this.deliveryFlag = false
                that.$notify({
                  title: '成功',
                  message: res.message,
                  type: 'success'
                })
                that.getList()
              }
            })
          }
        }
        console.log('已选择', this.multipleSelection)
      },
      // 删除订单
      deleteDelivery() {
        const that = this
        const l = this.multipleSelection.length
        if (l === 0) {
          this.$message({
            type: 'info',
            message: '未选择订单'
          })
        } else {
          this.deleteFlag = true
          const arr = []
          for (let i = 0; i < l; i++) {
            arr.push(this.multipleSelection[i].orderId)
          }
          orderAPI.deleteDelivery({ orderId: arr.toString() }).then(res => {
            if (res.success) {
              this.deleteFlag = false
              that.$notify({
                title: '成功',
                message: res.message,
                type: 'success'
              })
              that.getList()
            }
          })
        }
      },
      // 标记订单已付清
      payOff() {
        const that = this
        const l = this.multipleSelection.length
        if (l === 0) {
          this.$message({
            type: 'info',
            message: '未选择订单'
          })
        } else {
          this.payOffFlag = true
          const arr = []
          for (let i = 0; i < l; i++) {
            arr.push(this.multipleSelection[i].orderId)
          }
          orderAPI.payOff({ orderId: arr.toString() }).then(res => {
            if (res.success) {
              this.payOffFlag = false
              that.$notify({
                title: '成功',
                message: res.message,
                type: 'success'
              })
              that.getList()
            }
          })
        }
      },
      byNull() {},
      close_dialog_break_bill(val) {
        this.dialogBreakBill = val
      },
      breakWayBill() {
        this.dialogBreakBill = true
      },
      breakJump() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true
          const searchQuery = {
            query: query
          }
          searchProduction(searchQuery).then((res) => {
            console.log(res)
            if (res.data.success) {
              this.options4 = res.data.data
              this.loading = false
            }
          })
        } else {
          this.options4 = []
        }
      },
      productionSelect(value) {
        console.log(value)
        const params = {
          type: value
        }
        const that = this
        getProductionDetail(params).then(res => {
          if (res.data.success) {
            console.log(res.data.data)
            that.searchProductionTable = res.data.data
          }
        })
      },
      toggleSearch() {
        this.searchFlag = !this.searchFlag
      },
      querySearch(queryString, cb) {
        var restaurants = this.restaurants
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },
      rowClick(row, event, column) {
        const temp = ['INPUT', 'SPAN', 'BUTTON']
        if (temp.indexOf(event.srcElement.nodeName) === -1 || !event.srcElement.className) {
          this.$refs.multipleTable.clearSelection()
          this.$refs.multipleTable.toggleRowSelection(row)
        } else {
          event.stopPropagation()
        }
        const that = this
        this.currentRowClickInfo = row
        this.currentOrderId = row.orderId
        if (this.previewWayBillList.indexOf(row) === -1) {
          this.addPreviewWayBillFlag = false
        } else {
          this.addPreviewWayBillFlag = true
        }
        // 获取订单详情
        getGoodsInfo({ orderId: row.orderId }).then((res) => {
          if (res.success) {
            that.orderDetailInfo = res.data
            that.orderDetailInfoClone = res.data
            that.order_break_bill_flag = true
            console.log(res.data)
          }
        })
        // console.log('srcElement', event.srcElement.nodeName)
        // console.log('rowClick-row', row)
        // console.log('rowClick-event', event)
        // console.log('rowClick-column', column)
      },
      // 发运预览
      addPreviewWayBill() {
        // addPreviewWayBillFlag
        if (this.previewWayBillList.indexOf(this.currentRowClickInfo) === -1) {
          this.addPreviewWayBillFlag = true
          this.previewWayBillList.push(this.currentRowClickInfo)
        } else {
          this.addPreviewWayBillFlag = false
        }
        // 统计当前发运车的商品组成
        this.wayBillNumber.chairNumber += this.orderDetailInfo.chairInfo.length
        this.wayBillNumber.tableNumber += this.orderDetailInfo.tableInfo.length
        this.wayBillNumber.teaTableNumber += this.orderDetailInfo.teaTableInfo.length
        this.wayBillNumber.tvTableNumber += this.orderDetailInfo.tvTableInfo.length
        // createWayBillFlag
        if (this.previewWayBillList.length > 0) {
          this.createWayBillFlag = false
        }
      },
      // 每页多少条
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`)
        this.pageVo.pageSize = val
        this.getList()
      },
      // 当前页
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`)
        this.pageVo.pageNo = val
        this.getList()
      },
      handleDetail(index, row) {
        this.dialogFormVisible = true
        // 事件冒泡时，阻止省市区切割
        if (!(row.p_c_a instanceof Array)) {
          row.p_c_a = row.p_c_a.split('_')
        }
        this.layerData = JSON.parse(JSON.stringify(row))
        console.log(index, row)
      },
      handleDelete(index, row) {
        console.log(index, row)
      },
      handleSelect(item) {
        console.log(item)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 打开高德地图
      openAMap() {
        this.dialogAMap = true
        console.log('gaode')
      }
    },
    beforeRouteEnter(to, from, next) {
      getList({
        condition: {},
        pageVo: { pageNo: 1, pageSize: 10 }
      }).then(response => {
        if (response.success) {
          next(vm => {
            vm.tableList = response.data
            vm.pageVo = response.pageVo
            // 初始化设置
            vm.orderDetailInfo = {
              chair: [],
              table: [],
              tea: [],
              tv: [],
              remark: []
            }
          })
        }
      })
    },
    mounted() {},
    created() {
      if (this.tableList.length === 0) {
        this.getList()
      }
    }
  }
</script>

<style type="text/scss" scoped>
  .freight-address-map{
    margin-left: 20px;
    font-size: 20px;
    cursor: pointer;
  }
  .by-order-card{
    display: flex;
    flex-flow:column;
    flex:1;
    height: 100%;
    border: 1px solid #ebeef5;
    box-sizing: border-box;
    padding:4px;
    margin:4px 0;
  }
  .box-card{
    min-height: 100%;
    overflow: hidden;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  #by-order-break-btn{
    float: right;
    padding: 3px 6px;
    margin-right: 12px
  }
</style>
